<!-- home -->
<template>
  <page-view :full="true">
    <top-bar title=""
             :white="false">
    </top-bar>
    <page-content>
      <div class="login-container">

        <!-- <img class="login-bac"
             src="../../assets/image/setting/s_back.png"
             alt=""
             @click="goRegister" /> -->
        <p class="login-hi">设置密码</p>
        <p class="s-vel"><span><img class="s_war"
                 src="../../assets/image/setting/s_war.png"
                 alt="" /></span><span>密码由8-16位数字、字母任意组合</span></p>
        <div class="set-form">
          <p class="s-first">1、设置登录密码</p>
          <div class="login-input">
            <input :type='pwdFlag?"password":"text"'
                   class="login-ueseName"
                   v-model="password"
                   placeholder="请输入密码">
            <span class="login-eye">
              <!-- <img :src='pwdFlag?textIcon:pwdIcon' alt=""  @click="changePw"> -->
              <img src="../../assets/image/login/l_ceye.png"
                   alt=""
                   v-if="pwdFlag"
                   @click="changePw">
              <img src="../../assets/image/login/l_oeye.png"
                   alt=""
                   v-if="pwfl"
                   @click="changePw">
            </span>
          </div>
          <div class="login-input">
            <input type="password"
                   class="login-ueseName"
                   v-model="password2"
                   placeholder="请再次输入密码">
          </div>
          <p class="s-first">2、短信验证码</p>
          <div class="login-input">
            <input type="number"
                   class="login-ueseName code"
                   v-model="code"
                   placeholder="输入短信验证码">
            <van-button class="login-code" :loading="codeLoading" :disabled="password.length < 6 || down" round @click="sendCode" type="info">
              <span v-if="!down">发送验证码</span>
              <van-count-down v-if="down" @finish="finish" :time="time" format="ss秒" />
            </van-button>
          </div>
          <p class="s-first">3、邀请码</p>
          <div class="login-input">
            <input type="number"
                  v-model="invite"
                   class="login-ueseName"
                   placeholder="请输入邀请码">
          </div>
          <van-button class="s-over" :class="{'ok': code && password}" @click="submit" round type="info">完成</van-button>
        </div>

      </div>
    </page-content>
  </page-view>
</template>

<script>
import TopBar from '@/components/TopBar';
import PageView from '@/components/PageView';
import PageContent from '@/components/PageContent';
import service from '@/utils/request';
import { Dialog, Toast } from 'vant';

export default {
  components: {
    TopBar,
    PageView,
    PageContent
  },
  data () {
    return {
      codeLoading: false,
      phone: '',
      time: 60000,
      down: false,
      invite: '',
      code: '',
      //眼睛标识
      list: [],

      password: '',
      pwdFlag: true,
      pwfl: false,

      password2: '',
    }
  },

  computed: {},
  created(){
    this.phone = this.$route.params.phone;
  },
  mounted () {

  },

  methods: {
    //m密码
    changePw () {
      this.pwdFlag = !this.pwdFlag
      this.pwfl = !this.pwfl
    },
    //返回
    goRegister () {
      this.$router.push({ path: '/register' })
    },
    
    finish(){
      this.down = false;
    },
    sendCode(){

      if(!this.password || this.password.length < 6){
        Dialog({ 
          title: '提示',
          message: '请输入6位以上的密码！' 
        })
        return;
      }

      if(!this.password != this.password2){
        Dialog({ 
          title: '提示',
          message: '两次输入密码不一致！' 
        })
        return;
      }
      
      this.down = false;
      this.codeLoading = true;
      return service.post('/apiGetVerCode.do', {
        phone: this.phone,
        type: 0
      }, {
        hideloading: true
      }).then(res=>{
        this.down = true;
        this.codeLoading = false;
      }, ()=> {
        this.codeLoading = false;
      })
    },

    submit(){
      
      if(!this.password || this.password.length < 6){
        Dialog({ 
          title: '提示',
          message: '请输入6位以上的密码！' 
        })
        return;
      }

      if(this.password != this.password2){
        Dialog({ 
          title: '提示',
          message: '两次输入密码不一致！' 
        })
        return;
      }

      if(!this.code){
        Dialog({ 
          title: '提示',
          message: '请输入验证码！' 
        })
        return;
      }
      
      return service.post('/apiRegister.do', {
        phone: this.phone,
        password: this.password,
        code: this.code,
        invitation_code: this.invite
      }).then(res=>{
        Dialog.confirm({
          title: '恭喜您！',
          message: '注册成功，是否立即登录？',
          confirmButtonColor: '#585DF9'
        })
        .then(() => {
          this.$router.replace({
            path: '/login/0'
          })
        })
        .catch(() => {
          this.$router.replace({
            path: '/home'
          })
        });
      }, ()=> {
        this.codeLoading = false;
      })
    }
  }
}
</script>
<style lang="scss" scoped>
p {
  margin: 0;
}
.set-form {
  height: auto;
  padding: 0 20px;
}
.login-container {
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  position: relative;
  background: #fff;
  .login-circle {
    width: 179px;
    position: absolute;
    right: 0;
    top: 0;
  }
  .login-bac {
    width: 30px;
    height: 26px;
    margin: 47px 0 23px 22px;
  }
  .login-hi {
    width: 100%;
    height: 42px;
    line-height: 42px;
    padding-left: 23px;
    font-size: 30px;
    font-weight: 500;
    color: #3d3f6c;
    margin-top: 113px;
    font-weight: 500;
    margin-bottom: 20px;
  }
  .s-vel {
    width: 100%;
    height: 18px;
    padding-left: 20px;
    font-size: 13px;
    font-weight: 500;
    color: #aaacc8;
    line-height: 18px;
    span {
      vertical-align: middle;
      height: 22px;
    }
  }
  .s_war {
    width: 18px;
    height: 18px;
    margin-top: 4px;
    margin-right: 11px;
  }
  .s-first {
    width: 100%;
    padding: 25px 0 10px;
    font-size: 14px;
    font-weight: 500;
    color: #aaacc8;
  }
  .login-input {
    // width: 100%;
    height: auto;
    position: relative;
    color: #aaacc8;
    & + .login-input{
      margin-top: 5px;
    }
  }
  .login-ueseName {
    width: 100%;
    height: 47px;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 23px;
    border: 0;
    line-height: 47px;
    padding-left: 28px;
    padding-right: 60px;
    font-size: 16px;
    color: #aaacc8;
    background: #f2f1f8;
    &.code{
      margin-right: 120px;
    }
  }
  .login-eye {
    position: absolute;
    right: 19px;
    top: 15px;
    width: 25px;
    height: 18px;
    img {
      width: 25px;
      height: 18px;
    }
  }
  .login-code {
    position: absolute;
    top: 0;
    right: 0;
    height: 47px;
    font-size: 13px;
    font-weight: 400;
    color: #777bff;
    text-align: right;
    background-color: transparent;
    border: none;
  }
  .login-log {
    width: 226px;
    height: 64px;
    background: #ffffff;
    border-radius: 32px;
    border: 1px solid #4044d0;
    margin-top: 47px;
    margin-left: 53px;
  }
  .s-over {    
    width: 60%;
    height: 64px;
    line-height: 64px;
    background: #f2f1f8;
    border-radius: 32px;
    margin: 0 20%;
    margin-top: 61px;
    font-size: 18px;
    text-align: center;
    color: #aaacc8;
    margin-bottom: 50px;
    border: none;
    &.ok{
      background: linear-gradient( 141deg, #585DF9 0%, #5885F9 100%);
      color: #fff;
    }
  }
  .active {
    color: #fff;
    background: #585df9;
  }
}
</style>
